<template>
  <view class="contentIndex" >
    <view class="header"> </view>
    <view class="tab">
      <!-- tab的头部 -->
      <view class="tabHeader">
        <view class="left" :class="{ leftAcitve: tab == 0 }" @click="tabClick(0)">我要查件</view>
        <view class="right" :class="{ rightAcitve: tab == 1 }" @click="tabClick(1)">我要发货</view>
      </view>
      <!-- tab标签身体切换 -->
      <indexTabBody :getInfo="sendStore.getAddressInfo" :tab="tab" :sendInfo="sendStore.sendAddressInfo"
        @goAddressBook="goAddressBook"></indexTabBody>

      <view class="newfoots">
        <view class="footblock" @click="gotoMyPay">
          <view class="lefts">
            <view class="title">我的支付</view>
            <view class="txt">一键支付待付款项</view>
          </view>
          <view class="rights">
            <image class="img" src="../../assets/images/index/wdzf.png"
                   mode="scaleToFill" />
          </view>
        </view>
        <view class="footblock" @click="gotoTracking">
          <view class="lefts">
            <view class="title">货物跟踪</view>
            <view class="txt">实时跟踪货物</view>
          </view>
          <view class="rights">
            <image class="img" src="../../assets/images/index/hwgz.png"
                   mode="scaleToFill" />
          </view>
        </view>
        <view class="footblock" @click="gotoChangeOrder">
          <view class="lefts">
            <view class="title">我要改单</view>
            <view class="txt">修改订单内容</view>
          </view>
          <view class="rights">
            <image class="img" src="../../assets/images/index/wygd.png"
                   mode="scaleToFill" />
          </view>
        </view>
        <view class="footblock" @click="gotoInvoicing">
          <view class="lefts">
            <view class="title">电子开票</view>
            <view class="txt">开具电子发票</view>
          </view>
          <view class="rights">
            <image class="img" src="../../assets/images/index/dzkp.png"
                   mode="scaleToFill" />
          </view>
        </view>
      </view>

      <view class="smallfoots">
        <view class="left" @click="gotoDeatail(1)">
          <image class="img" src="../../assets/images/index/jgsx.png" mode="scaleToFill" />
          <text>价格时效</text>
        </view>
        <view class="middle">|</view>
        <view class="right" @click="gotoDeatail(2)">
          <image class="img" src="../../assets/images/index/wdcx.png" mode="scaleToFill" />
          <text>网点查询</text>
        </view>
      </view>

    </view>
<!--通知-->
   <home-notify
        v-if="showBottomNotify && notifyCount>0"
        :notifyCount="notifyCount"
        @closeBottomNotify="closeBottomNotify"
    ></home-notify>

    <nut-popup position="bottom"
               v-model:visible="showTest"
               @click-close-icon="showTest=false"
               @click-overlay="showTest=false"
               :close-on-click-overlay="true"
               :safe-area-inset-bottom="true"
    >
      <nut-checkbox-group v-model="testValue">
        <nut-checkbox label="1">1</nut-checkbox>
        <nut-checkbox label="2">2</nut-checkbox>
        <nut-checkbox label="3">3</nut-checkbox>
      </nut-checkbox-group>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import Taro, { useDidShow } from "@tarojs/taro";
import {ref, watch} from "vue";
import indexTabBody from "@/components/indexTabBody.vue";
import homeNotify from "@/components/pages/index/homeNotify.vue";
import useAddressInfoStore from "@/store/addressbook";
import useSendGoodsStore from "@/store/sendGoods";
import { AddressInfoDirection } from "@/type";
import {$post, checkLogin, noUserToLogin} from "@/@api";
import useTransactionStore from "@/store/pickUp";
import useMyOrderStore from "@/store/myOrder";

checkLogin()

const store = useAddressInfoStore();
const sendStore = useSendGoodsStore();
const transactionStore = useTransactionStore();
function goAddressBook(val: AddressInfoDirection) {
  if (val === AddressInfoDirection.Sender) {
    store.addressEditParameter.addressDirection = AddressInfoDirection.Sender;
  } else if (val === AddressInfoDirection.Getter) {
    store.addressEditParameter.addressDirection = AddressInfoDirection.Getter;
  }
  else {
    store.addressEditParameter.addressDirection = AddressInfoDirection.Sender;
  }
  Taro.navigateTo({
    url: "/pages/addressBook/index?type="+val,
  })
}

const showBottomNotify = ref<boolean>(true)
const notifyCount = ref<number>(1)
const tab = ref<number>(0);
function tabClick(e: number) {
  if (e == 0) {
    tab.value = 0;
  } else {
    tab.value = 1;
  }
  console.log(e);
}
function gotoServiceQuery() {
  noUserToLogin()
  Taro.navigateTo({
    url: "/pages/serviceQuery/index",
  });
}
//跳转到电子开票
function gotoInvoicing(){
  noUserToLogin()
  Taro.navigateTo({
    url: "/pages/invoicing/index",
  });
}
//跳转改单列表
function gotoChangeOrder() {
  noUserToLogin()
  Taro.navigateTo({
    url: "/pages/changeOrder/index",
  });
}
//跳转我的支付
function gotoMyPay() {
  noUserToLogin()
  Taro.navigateTo({
    url: "/pages/myPay/index",
  });
}
//跳转到运单跟踪
function gotoTracking() {
  noUserToLogin()
  Taro.navigateTo({
    url: "/pages/orderTracking/index",
  });
}

function gotoDeatail(num: number) {
  noUserToLogin()
  if (num == 1) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/priceTimeliness/index",
    });
  } else if (num == 2) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/outletQuery/index",
    });
  } else if (num == 3) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/coupon/index",
    });
  }
}

const testValue = ref<string[]>([])
const showTest = ref<boolean>(false)
  const orderStore = useMyOrderStore()
async function closeBottomNotify(){
  // showTest.value = true
  showBottomNotify.value = false
  
  const res: any = await $post(
      `/selfmachine-system/order/list`,
      {
        billNo:202333102
      }
  )
  if(res.data.rows && res.data.rows.length){
    orderStore.orderList = res.data.rows[0]
  
  }
 
  // let res: any = await $post(
  //     "/selfmachine-system/order/list",
  //     {
  //       billNo: '250021925',
  //     }
  // )
  
  // transactionStore.transactionList = res.data.rows
  // transactionStore.pickUpCode = transactionStore.transactionList.map(item=>{return item.pickUpCode})
  Taro.navigateTo({
    //url: "/pages/receiveAgent/index?billNo=444440904&expirationTime=2023-09-23%2010%3A02%3A11",
    url: "/pages/sendGoods/success",
    // url: "/pages/pickUp/success",
    // url: "/pages/sign/confirm",
  })
}
watch(testValue.value,(newVal)=>{
  console.log('newVal',newVal)
}, {deep: true,immediate: true})

useDidShow(()=>{
})

</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.button {
  width: 650rpx;
  background: linear-gradient(90deg, #0966ff 2%, #0658de 99%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 100rpx;
  border-radius: 50rpx;
  margin-left: 25rpx;
  font-family: PingFang SC;
  font-size: 32rpx;
}

.contentIndex {
  // display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background: #efefef;
  width: 100vw;
  //height: 1300rpx;
  position: relative;

  .header {
    width: 100%;
    height: 416rpx;
    background: url("../../assets/images/index/shouye_img_bj1.png") no-repeat;
    // background-attachment: fixed;
    background-size: contain;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .tab {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 500rpx;
    // background: green;
    margin-top: 370rpx;

    .tabHeader {
      width: 700rpx;
      height: 100rpx;
      margin-left: 25rpx;
      // background: blue;
      display: flex;
      align-items: flex-end;

      .left {
        width: 100%;
        height: 80%;
        border-radius: 25rpx 0rpx 0rpx 0rpx;
        background-color: #efefef;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        font-family: PingFang SC;
        font-size: 32rpx;
      }

      .leftAcitve {
        height: 100%;
        border-radius: 25rpx 25rpx 0rpx 0rpx;
        background-color: white;
      }

      .rightAcitve {
        width: 100%;
        height: 100% !important;
        border-radius: 25rpx 25rpx 0rpx 0rpx !important;
        background-color: white !important;
      }

      .right {
        width: 100%;
        height: 80%;
        border-radius: 0rpx 25rpx 0rpx 0rpx;
        background-color: #efefef;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        font-family: PingFang SC;
        font-size: 32rpx;
      }
    }

    .newfoots {
      width: 700rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin: 25rpx 0 0 25rpx;
      display: flex;
      flex-wrap: wrap;
      .footblock {
        width: 294rpx;
        height: 68rpx;
        padding: 32rpx 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lefts {
          .title {
            font-family: PingFang SC;
            font-size: 28rpx;
            font-weight: bold;
            color: #252525;
          }
          .txt {
            font-family: PingFang SC;
            font-size: 20rpx;
            color: #999999;
          }
        }
        .rights {
          .img {
            width: 60rpx;
            height: 60rpx;
          }
        }
      }
    }

    .smallfoots {
      margin-top: 20rpx;
      padding-bottom: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .left,.right {
        color: #666;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .img {
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }
      }
      .middle {
        margin: 0 48rpx;
        color: #bbb;
        font-size: 24rpx;
      }
    }

    .foots {
      width: 100%;
      height: 120rpx;
      width: 700rpx;
      margin-left: 25rpx;
      margin-top: 25rpx;
      display: flex;

      .lefts {
        width: 48%;
        height: 100%;
        background: white;
        border-radius: 20rpx;
        display: flex;
        margin-right: 24rpx;
        padding-right: 20px;
        justify-content: space-between;

        .leftss {
          // width: 80%;
          // height: 70%;
          // margin-top: 20rpx;

          .topss {
            display: flex;
            align-items: center;
            font-family: PingFang SC;
            font-size: 28rpx;
            color: #252525;
            height: 50%;
            margin-left: 25rpx;
          }

          .bottomss {
            display: flex;
            margin-left: 25rpx;
            align-items: flex-start;
            font-family: PingFang SC;
            font-size: 20rpx;
            color: #999999;
            height: 50%;
          }
        }

        .leftImg {
          width: 50rpx;
          height: 70%;
          background: url("../../assets/images/index/shouye_icon_wodedingdan.png") no-repeat center;
          margin-top: 20rpx;
        }
      }

      .rights {
        width: 48%;
        height: 100%;
        background: white;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        padding-right: 20px;

        .leftss {
          // width: 80%;
          // height: 70%;
          // margin-top: 20rpx;

          .topss {
            display: flex;
            align-items: center;
            font-family: PingFang SC;
            font-size: 28rpx;
            color: #252525;
            height: 50%;
            margin-left: 25rpx;
          }

          .bottomss {
            display: flex;
            margin-left: 25rpx;
            align-items: flex-start;
            font-family: PingFang SC;
            font-size: 20rpx;
            color: #999999;
            height: 50%;
          }
        }

        .leftImg {
          width: 50rpx;
          height: 70%;
          background: url("../../assets/images/index/shouye_icon_fuwuchaxun.png") no-repeat center;
          margin-top: 20rpx;
        }
      }
    }

    .footMeun {
      width: 100%;
      height: 116rpx;
      position: fixed;
      bottom: 0;
      background-color: white;
      display: flex;
    }
  }
}



// .logo {
//   height: 200rpx;
//   width: 200rpx;
//   margin-top: 200rpx;
//   margin-left: auto;
//   margin-right: auto;
//   margin-bottom: 50rpx;
// }
</style>
